<template>
  <div class="b-model">
    <img v-if="modelLoaded" src="@/components/bimfaceCom/images/modelTreeBtn.png" class="model-tree-btn" @click="showModelTree = true" />
    <BimfaceCom
      v-if="viewToken"
      ref="BimfaceCom"
      :file-id="fileId"
      :view-token="viewToken"
      :show-model-tree.sync="showModelTree"
      :element-tree-data="elementTreeData"
      left="8%"
      top="50px"
      :default-tree-id="defaultTreeId"
      :background-opacity="0"
      :custom-right-menu="customRightMenu"
      :model-state-lists="modelStateLists"
      @modelRightClick="modelRightClickHandle"
      @treeNodeClick="treeNodeClick"
      @modelLoaded="modelLoadedHandle"
    />
  </div>
</template>
<script>
import BimfaceCom from '@/components/bimfaceCom/BimfaceCom.vue'
import BimfaceComMinix from '@/components/bimfaceCom/bimfaceComMinix'

export default {
  components: { BimfaceCom },
  mixins: [BimfaceComMinix],
  mounted() {
    this.getModelViewToken()
  },
  data() {
    return {
      // 自定义模型右击菜单,emit为监听的事件名称
      customRightMenu: [{ name: '构件信息', emit: 'modelRightClick' }],
      // 构件变色数据-> 包含颜色:color,构件id（bimface中的构件id）:id
      modelStateLists: []
    }
  },
  methods: {
    // 点击自定义菜单的事件 data为点击模型对应的构件树信息
    modelRightClickHandle(data) {}
  }
}
</script>
<style lang="scss" scoped>
.b-model {
  width: 100%;
  height: calc(100% - 70px);
  position: absolute;
  // 设置右侧菜单按钮位置
  ::v-deep .bf-house {
    // right: calc(22% + 12px);
  }
  ::v-deep.bf-menu {
    // right: calc(22% + 12px);
  }
  .model-tree-btn {
    position: absolute;
    left: 4%;
    top: 50px;
    z-index: 9;
    width: 50px;
    cursor: pointer;
  }
}
</style>
